<template>
	<view class="statistic">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>

		<view class="statistic__header">
			<view class="statistic__header-title">终端总数</view>
			<view class="statistic__header-money">{{terminalAmountData.totalNum}}</view>
			<view class="flex justify-around ">
				<view class="statistic__item" v-for="(item,index) in terminalAmountData.totalList" :key="index">

					<view class="merchant-grid__title">{{item.key}}</view>

					<view class="merchant-gri__value">{{item.value}}</view>
				</view>

			</view>

		</view>

		<u-card title="激活占比" thumb="/static/image/home/icon_stat.png" thumb-width="30">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-col-between u-p-t-0">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />



				</view>

			</view>

		</u-card>

		<view class="card">

			<u-cell-group class="card__head">
				<u-cell-item title="终端统计" :arrow="false" :center="true" bg-color="#ffffff"
					:value-style="{ color: '#9D60FF' }">
					<u-image :src="thumb" width="30" height="30" slot="icon" class="card__icon mr-10"></u-image>
				</u-cell-item>

			</u-cell-group>

			<scroll-view class="scroll-view_H" scroll-x="true">

				<view class="scroll-header">
					<view class="scroll-item">
						名称
					</view>
					<view class="scroll-item">
						终端总数
					</view>
					<view class="scroll-item">
						激活总量
					</view>
					<view class="scroll-item">
						电签
					</view>
					<view class="scroll-item">
						传统
					</view>


				</view>

				<view class="scroll-content" v-for="(item,index) in terminalList">
					<view class="scroll-item">
						{{item.agentName}}
					</view>
					<view class="scroll-item">
						{{item.totalNum}}
					</view>
					<view class="scroll-item">
						{{item.activeNum}}
					</view>
					<view class="scroll-item">
						{{item.pos1Num}}
					</view>
					<view class="scroll-item">
						{{item.pos2Num}}
					</view>

				</view>
			</scroll-view>


		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				terminalAmountData: {},
				thumb: '/static/image/benefit/icon_trans_profit.png',
				opts: {
					// 横屏模式
					rotate: false,
					// 横屏锁定
					rotateLock: false,
					color: ["#E1B667", "#9D60FF"],
					// padding: [0, 0, 0, 0],
					// 是否显示圆环上的解释
					dataLabel: true,
					enableScroll: false,
					legend: {
						// 是否显示右侧图例
						show: true,
						position: "",
						lineHeight: 25,
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							// 饼的宽度
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							// 颜色的角度
							offsetAngle: 18,
							labelWidth: 15,
							// 是否绘制圆环中间的的隔线
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				chartData: {},
				data: {
					"pageNo": "1",
					"pageSize": "10"
				},
				terminalList: []

			}
		},
		mounted() {
			this.terminalStatDetail();
			this.terminalStatDetailByAgent();
		},
		methods: {
			terminalStatDetail() {
				let categories = [];
				let _that = this;
				_that.$zx.terminal_api.terminalStatDetail().then((data) => {
					// console.log("data=" + JSON.stringify(data.activeList))
					_that.terminalAmountData = data;

					data.activeList.forEach(function(item, index, array) {


						categories.push({
							"name": item.key,
							"value": item.value,
							"labelText": item.key
						});

					});


					let res1 = {
						series: [{
							data: categories
						}]
					};

					_that.chartData = JSON.parse(JSON.stringify(res1));



				});
			},
			terminalStatDetailByAgent() {

				let _that = this;

				_that.$zx.terminal_api.terminalStatDetailByAgent(this.data).then((data) => {
					console.log("data=" + JSON.stringify(data))
					this.terminalList = data.statDataList;
				});
			}

		},
	}
</script>

<style scoped lang="scss">
	.statistic {
		width: 100vw;
		height: 100vh;
		position: relative;
		padding: 10rpx;

		&__header {
			background-image: url(/static/image/benefit/img_trade_query_page_bg.png);
			background-size: 100% 100%;
			color: white;
			text-align: center;
			height: 348rpx;
			padding: 20rpx 30rpx;

		}

		&__header-title {
			margin-top: 30rpx;

		}

		&__header-money {
			margin-top: 30rpx;
			font-size: 22px;
			font-weight: bold;
			margin-bottom: 60rpx;
		}

		&__item {
			display: flex;
			flex-direction: column;
			font-size: 12px;

		}
	}

	.card {
		background-color: white;
		border-radius: 20rpx;
		margin: 20rpx;


		&__icon {
			margin-bottom: 15rpx;
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

	}

	.scroll-header,
	.scroll-content {
		display: flex;
		flex-wrap: nowrap;


	}

	.scroll-item {
		flex: 1;
		// width: 100rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;


	}
</style>